<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
   
    <div id="app">
        <h3 id="h3">{{msg}}</h3>
        <input type="button" value="修改msg" @click="msg='no'"/>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'ok'
            },
            methods: {
                show() {
                    console.log('执行了show方法')
                }
            },
            beforeCreate() {
                // 这是第一个生命周期函数，表示实例完全被创建出来之前，会执行他
                // console.log(this.msg)
                // this.show()
                // 注意在beforeCreate 生命周期函数执行的时候，data和methods中的数据和方法都没有初始化
            },
            created() {
                console.log(this.msg)
                this.show()
                // 在执行created的时候，data和methods中的数据和方法都已经初始化好了
                // 如果要调用methods中的方法，或者操作data中的数据，最早，只能在created中操作
            },
            beforeMount() { // 这是遇到的第三个生命周期函数，表示模板已经在内存中编辑完成了，但还未渲染进页面中
                console.log(document.getElementById('h3').innerText)
                //在beforeMount执行的时候，页面中的元素还没有真正替换过来，只是之前的模板字符 
            },
            mounted() { // 这个生命周期函数，表示内存中的模板已经挂载到了页面中，用户已经可以看到渲染好的页面了
                console.log(document.getElementById('h3').innerText)
                // 注意 mounted 是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，
                // 此时，如果没有其他操作，这个实例就在我们的内存中，一动不动
            },



            // 下面是运行中的两个事件
            beforeUpdate() { // 这时候，我们的界面还没有被更新。(但是数据已经更新了)
                console.log('界面上元素的内容：'+document.getElementById('h3').innerText)
                console.log('data中的msg数据是：'+ this.msg)
                // 得出结论： 当执行beforeUpdate() 页面中显示的数据还是旧的，此时data中的数据是最新的，页面尚未和最新的data数据同步
            },

            updated() { // 这时候，界面中的数据和data是一样的
                console.log('界面上元素的内容：'+document.getElementById('h3').innerText)
                console.log('data中的msg数据是：'+ this.msg)
            }
        })
    </script>
</body>
</html>